import React from 'react'
import style from './pillst.module.css'
import { Button, Space, Swiper, Toast } from 'antd-mobile'


export default function PilIst() {
  const colors = ['#ace0ff', '#bcffbd', '#e4fabd', '#ffcfac']
  const items = colors.map((color, index) => (
    <Swiper.Item key={index}>
      <div
        className={style['content']}
        style={{ background: color }}
        onClick={() => {
          Toast.show(`你点击了卡片 ${index + 1}`)
        }}
      >
        {index + 1}
      </div>
    </Swiper.Item>
  ))
  return (
    <div className={style['pillst']}>
      {/* 图书+听书综合部分页面 */}
      <div className={style['pillst-lunguo']}>
        <Swiper className={style['lunguo-tu']} style={{'--border-radius': '10px',}} loop autoplay>{items}</Swiper>
      </div>
      <div className={style['pillst-qqbh']}>
        <span>
          <p className={style['xuanz']}><i className='iconfont icon-quanbufenlei' /></p>
          <p className={style['wenzi']}>全部</p>
        </span>
        <span>
          <p className={style['xuanz1']}><i className='iconfont icon-A' /></p>
          <p className={style['wenzi1']}>签到</p>
        </span>
        <span>
          <p className={style['xuanz2']}><i className='iconfont icon-bangdan' /></p>
          <p className={style['wenzi2']}>榜单</p>
        </span>
        <span>
          <p className={style['xuanz3']}><i className='iconfont icon-huiyuan' /></p>
          <p className={style['wenzi3']}>会员</p>
        </span>
      </div>
    </div>
  )
}
